/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 16:22:24
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-09-01 15:14:20
 * @Auditor: 
 */
import React from 'react';
import { Collapse } from 'antd';
import classnames from 'classnames';
import { FormField } from './../../../interface';
import style from './../style.module.scss';

const { Panel } = Collapse;
interface IProps {
  title: string;
  list: FormField[];
  addBtnClick(e: React.BaseSyntheticEvent): void;
  onDelField(fieldName: string): void
}

export default ({ title, addBtnClick, list, onDelField }: IProps) => {
  return (
    <div className={classnames(style.resetCollapse, style.userTask)}>
      <Collapse>
        <Panel header={title} key='panel' extra={
          <span className={style.addBtn} onClick={addBtnClick}>+{window.$app.t('add')}</span>
        }>
          {list.map(item => (
            <p key={item.fieldName} className={style.field}>
              <span>{item.fieldName}</span>
              <span onClick={() => onDelField(item.fieldName)} className={style.delaction}>
                {window.$app.t('delete')}
              </span>
            </p>
          ))}
        </Panel>
      </Collapse>
    </div>
  )
}